<template>
  <div class="app-container">
    添加收费

    <el-form label-width="120px">
      <el-form-item label="投诉内容">
        <el-input v-model="proComplaint.item"/>
      </el-form-item>
      <el-form-item label="业主id">
        <el-input v-model="proComplaint.ownerId"/>
      </el-form-item>
      <el-form-item label="处理状态">
        <el-input v-model="proComplaint.status"/>
      </el-form-item>
      <el-form-item label="处理人">
        <el-input v-model="proComplaint.handler"/>
      </el-form-item>
      <el-form-item>
        <el-button :disabled="saveBtnDisabled" type="primary" @click="saveOrUpdate">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import complaintApi from '@/api/pro/complaint'

export default {
  data(){
    return{
      proComplaint: {
        item: '',
        ownerId: '',
        status:0,
        handler:''
      },
      //是否禁用按钮
      saveBtnDisabled:false,
      //dev.env.js里的地址
      BASE_API:process.env.BASE_API
    }
  },
  created(){
    this.init()
  },
  watch:{
    $route(to, from){
      this.init()
    }
  },
  methods:{
    init(){
      //判断路径中是否有id值
      if (this.$route.params && this.$route.params.id) 
      {
        const id = this.$route.params.id
        this.getComplaintInfo(id)
      }
      else
      {
        this.proComplaint = {}
      }
    },
    getComplaintInfo(id){
      complaintApi.getComplaintById(id)
        .then(response => {
          this.proComplaint = response.data.complaint
        })
    },
    saveOrUpdate(){
      if (!this.proComplaint.id)
      {
        //添加
      this.saveComplaint()
      }
      else
      {
        //修改
        this.updateComplaint()
      }
    },
    saveComplaint(){
      complaintApi.addComplaint(this.proComplaint)
        .then(response => {
          //提示信息
          this.$message({
            type: 'success',
            message: '添加成功!'
          })
          //刷新页面
          this.$router.push({path:'/complaint/table'})
        })
    },
    updateComplaint(){
      complaintApi.updateComplaintInfo(this.proComplaint)
        .then(response => {
          //提示信息
          this.$message({
            type: 'success',
            message: '修改成功!'
          })
          //刷新页面
          this.$router.push({path:'/complaint/table'})
        })
    }
  }
}
</script>